<template>
  <div id="app">
    <h1>插槽</h1>

    <lh-button type="primary">主要按钮</lh-button>
    <lh-button type="success">成功按钮</lh-button>
    <lh-button type="warning">警告按钮</lh-button>
    <lh-button type="danger">危险按钮</lh-button>
    <lh-button type="danger">微信按钮</lh-button>
    <lh-button size="samll">小按钮</lh-button>
    <lh-button >普通按钮</lh-button>
    <!-- 卡片 -->
    <lh-card class="box-card">
      <!-- 头部 -->
      <div slot="header"  >
        <span>头部</span>
        <button type="success">成功按钮</button>
      </div>
      <!-- 内容 -->
      <div class="content">
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>

      </div>
    </lh-card>

    <!-- 任务清单 -->
    <todolist class="todolist" :data="todos">
      <template slot-scope="scope">
        <input type="checkbox">
        <span>{{scope.row.text}}</span>
        <i>√</i>
      </template>
    </todolist>


  </div>
</template>


<script>
import LhButton from '../src/components/lhButton/LhButton.vue'
import  LhCard from "@/components/lhCard/LhCard.vue"
import Todolist from '@/components/todalist/todolist.vue'
export default{
  data(){
    return{
      todos:[
        {id:1,text:'学习vue'},
        {id:2,text:'学习React'},
        {id:3,text:'学习js'}
      ]
    }
  },
  components:{
    LhButton,
    LhCard,
    Todolist,
  }
}

</script>

<style lang="less" scoped>
h1{
  margin-bottom: 30px;
}
.box-card{
  width: 480px;
}
.todolist{
  margin-top: 30px;
}

</style>
